<script setup>
import { onMounted, ref } from 'vue';
import HomePanel from './HomePanel.vue';
import { getHotAPI } from '@/api/hot';
const list = ref([])
onMounted(async () => {
    try {
        const hotAPI = await getHotAPI()
        list.value = hotAPI.result


    } catch {

    }
})

</script>

<template>

    <home-panel title="人气推荐" subtitle="人气爆款 不容错过">
        <template #main>
            <div class="head-side">
                <ul>
                    <li v-for="item in list"><a href=""><img v-img-lazy="item.picture" alt="">
                            <p>{{ item.title }}</p>
                            <p>{{ item.alt }}</p>
                        </a></li>
                </ul>
            </div>
        </template>


    </home-panel>
</template>

<style scoped lang="scss">
.head-side {
    img {
        width: 200px;
        height: 200px;
    }

    ul {
        width: 100%;
        display: flex;
        justify-content: space-around;
    }

    li {
        text-align: center;

        p {
            font-size: 16px;
        }
    }
}
</style>